<template>
	<view>
		<view class="top">
			<img :src="PlaylistDetail.coverImgUrl" alt="">
			<div :style="{height: `${navBarHeight}px` }"></div>
			<div class="return" @click="Return()"><uni-icons type="left" size="30"></uni-icons></div>
			<view class="container">
				<div class="left">
					<img :src="PlaylistDetail.coverImgUrl" alt="">
				</div>
				<div class="right">
					<div>{{PlaylistDetail.name}}</div>
					<div>{{PlaylistDetail.description}}</div>
				</div>
			</view>
		</view>
		
		<view class="bottom">
			<view class="list-container" v-for="(item,index) in playList" @click="Switch(index)">
			    <!-- 左侧数字标号 -->
			    <view class="left-number">{{ index+1 }}</view>
			    
			    <!-- 中间内容区域 -->
			    <view class="middle-content">
			      <view class="main-text">{{ item.name }}</view>
			      <view class="sub-text">
					  <span v-for="(item,index) in item.ar">{{item.name}}</span>
				  </view>
			    </view>
			    
			    <!-- 右侧图标 -->
			    <view class="right-icon">
			      <uni-icons type="list" size="20" color="#999"></uni-icons>
			    </view>
			  </view>
		</view>
		<musicBottomNav ref="child"></musicBottomNav>
	</view>
</template>

<script>
	import {musicUrl} from '../../config.js'
	import musicBottomNav from './bottomNav.vue'
	import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				id: '',
				playList: [],
				PlaylistDetail: {},
				navBarHeight: 0
			}
		},
		components: {
			musicBottomNav
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		    this.id = option.id;
			console.log(option.id); //打印出上个页面传递的参数。
			this.getPlayList();
			this.getPlaylistDetail();
			this.navBarHeight = uni.getSystemInfoSync().statusBarHeight
		},
		onReady() {
		},
		computed: {
			  ...mapState('music', ['playList','index'])
		},
		methods: {
			...mapMutations('music', ['getPlayList_vuex','changeIndex_vuex']),
			Return() {
				console.log('return')
				uni.navigateBack({
					delta: 1
				});
			},
			Switch(idx) {
				this.changeIndex_vuex(idx)
				this.getPlayList_vuex(this.playList)
				this.$refs.child.play()
			},
			async getPlayList() {
				await uni.request({
					url: musicUrl + `/playlist/track/all?id=${this.id}&limit=20&offset=1`,
					success: (res) => {
						console.log(res,'resssssss')
						this.playList = res.data.songs;
						
					}
				})
			},
			async getPlaylistDetail(){
			    await uni.request({
			    	url: musicUrl + `/playlist/detail?id=${this.id}`,
			    	success: (res) => {
			    		console.log(res)
			    		this.PlaylistDetail = res.data.playlist
			    	}
			    })   
			},
		}
	}
</script>

<style scoped>
.return {
	margin-left: 10px;
	padding: 5px;
}
	
.top>.container {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.top>.container>.left {
	margin-left: 30px;
}
.top>.container>.left>img {
	width: 125px;
	height: 125px;
	border-radius: 8px;
}
.top>.container>.right {
	padding: 20px;
}

.top>.container>.right>div {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.top>.container>.right>div:nth-child(1) {
	color: #fff;
	font-size: 16px;
}

.top>.container>.right>div:nth-child(2) {
	opacity: .4;
	color: #fff;
	margin-top: 24%;
	font-size: 13px;
}

.top>img {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	filter: blur(30px);
}

.bottom {
	background-color: #fff;
	border-radius: 30px 30px 0 0;
	width: 100%;
	margin-top: 20px;
	padding: 10px;
}

.list-container {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  box-sizing: border-box;
  border-bottom: 1px solid #f5f5f5;
}

.left-number {
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background-color: #2979ff;
  color: #fff;
  border-radius: 50%;
  margin-right: 12px;
  font-size: 14px;
}

.middle-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 8px 0;
  box-sizing: border-box;
}

.main-text {
  font-size: 16px;
  color: #333;
  line-height: 22px;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sub-text {
  font-size: 12px;
  color: #999;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.right-icon {
  width: 20px;
  height: 20px;
  margin-left: 10px;
}
</style>
